<template>
  <div class="login">
    <template>
      <div class="login-wrap">
        <el-form class="login-container" :model="form" :rules="rules">
          <h1 class="title">登录系统</h1>
          <el-form-item label="用户名:" prop="form">
            <el-input type="text" v-model="form.user" placeholder="登录账号" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="form">
            <el-input show-password v-model="form.password" placeholder="登录密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width:100%;" @click="submit()">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

  </div>
</template>

<script>
import axios from "axios";
//import qs from 'qs';
export default {
  data() {
    return {
      form: {
        user: '',
        password: ''
      },
      rules: {
        user: [
          {required: true, trigger: 'blur', message: '请输入用户名'}
        ],
        password: [
          {required: true, trigger: 'blur', message: '请输入密码'}
        ]
      }
    }
  },
  methods: {
    //登录
    // submit(){
    //   let url = '/api/User/Login'
    //   axios.post(url,qs .stringify({account: this.form.user, password: this.form.password}),
    //       {headers: {'Content-Type':'application/json;charset=utf-8'}})
    //       .then(resp =>{
    //         if(resp.data.code === 200) {
    //           console.log(resp.data.data);
    //           localStorage.setItem("token",resp.data.data)
    //           this.$router.push('/input')
    //         }else {
    //           this.$message.error('登录失败!')
    //         }
    //       })
    // }
    submit() {
      axios.post(
          'api/User/Login',
          {},
          {
            params: {
              account: this.form.user,
              password: this.form.password
            },
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            }
          }
      )
          .then(response => {
            if (response.status === 200) {
              if (response.data.code === 1) {
                // 用户不存在
                this.$message.error('用户名或密码错误！');
              } else {
                // 用户存在，保存 token 到本地存储并跳转到输入页面
                console.log(response.data.body);
                localStorage.setItem("token", response.data.body);
                this.$router.push('/input');
                this.$message.success('登录成功！');
              }
            } else {
              this.$message.error('登录失败!');
            }
          })
          .catch(error => {
            console.error('登录请求失败:', error);
            this.$message.error('登录请求失败，请稍后重试。');
          });
    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>